<template>
    <!-- 底部评论区 start -->
    <footer class="footer-box">
        <div class="comment-input" @click=" showComment=true ">
            不想说点什么吗？
        </div>
        <div class="comment-detail"
            @click="showComment=false"
            v-show="showComment"
        >
            <div class="user-input" @click.stop>
                <h4>头像</h4>
                <ul class="user-head" @click="userChoose($event.target)">
                    <li v-for="(c, i) in 24" :key="i"
                        :img.prop=" `user${c}.png` "
                        :class="{ 'user-choose':userImg==`user${c}.png` }"
                        :style="`background-image: url(./imgs/users/user${c}.png)`"
                    ></li>
                </ul>
                <h4>昵称</h4>
                <input class="user-nikename" type="text" placeholder="昵称" />
                <h4>评分</h4>
                <div class="film-source reset-star">
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img open"></span>
                    <span class="star-img close"></span>
                    <span class="star-img close"></span>
                    <span class="star-source">7.9</span>
                </div>
                <h4>评论</h4>
                <textarea
                    class="user-message"
                    placeholder="留下点足迹..."
                ></textarea>
                <div class="send-btn">
                    <span @click="showComment=false">关闭</span>
                    <span>发送</span>
                </div>
            </div>
        </div>
    </footer>
    <!-- 底部评论区 end -->
</template>
<script>
module.exports = {
    data(){
        return {
            userImg:"user1.png",
            showComment:false
        }
    },
    methods: {
        userChoose(target){
            if(target.tagName=="LI"){
                // console.log(target.img);
                this.userImg = target.img;
            }
        }
    },
}
</script>